<!-- 27. 分类模块 -->
<script setup lang="ts">
// 27.9 引入通用组件-轮播图:
import XtxSwiper from '@/components/XtxSwiper.vue'
import { getHomeBannerAPI } from '@/services/home' // 28.1
import type { BannerItem } from '@/types/home' // 28.6
import { getCategoryTop } from '@/services/category' // 29.2
import type { CategoryTopItem } from '@/types/category.d.ts' // 29.8
import PageSkeleton from './components/PageSkeleton.vue' // 31.6
import { onLoad } from '@dcloudio/uni-app'
import { ref, computed } from 'vue'

// 28. 渲染[商品分类]轮播图 ->分类单独传页面参数值, 调用接口、获取数据, 传入组件、自行渲染?
const bannerList = ref<BannerItem[]>([]) // 28.5 + 28.6同步
const getBannerData = async () => {
  const res = await getHomeBannerAPI(2) // 28.2
  bannerList.value = res.result
}

// 29.3 获取[一级分类]数据:
const categoryList = ref<CategoryTopItem[]>([]) // 29.5 一级分类
const getCategoryTopData = async () => {
  const res = await getCategoryTop()
  categoryList.value = res.result
}

const activeIndex = ref(0) // 29.end Tap交互效果 --- 高亮下标

// 31.7 是否加载中的标记:
const isFinish = ref(false)

// 28.3 页面加载
onLoad(async () => {
  await Promise.all([getBannerData(), getCategoryTopData()]) // 31.8

  isFinish.value = true // 31.9
})

// 30. 获取[二级分类]数据
// 细节24:(忽略点) 二级分类 首先是基于 一级分类(categoryList)进行的,
// 该变量含有所有<左侧Tap栏>对应的所有数据, 因此要根据 "高亮下标", 截取出当前[二级分类]！！！
// 🔥其次, 用户每点击 Tap栏, 就 <计算> 出当前栏对应的列表数据！！！
const subCategoryList = computed(() => {
  // 细节25: 处理的 属性名 很长时, 一定要留意是否某一环节是 undefined！！！
  return categoryList.value[activeIndex.value]?.children || []
})
// console.log(subCategoryList)
</script>

<template>
  <!-- 27.5 静态结构 -->
  <view class="viewport" v-if="isFinish">
    <!-- 搜索框 -->
    <view class="search">
      <view class="input">
        <text class="icon-search">女靴</text>
      </view>
    </view>
    <!-- 分类 -->
    <view class="categories">
      <!-- 左侧：一级分类 -->
      <scroll-view class="primary" scroll-y>
        <!-- 29.9 渲染[一级分类]数据: -->
        <view
          v-for="(item, index) in categoryList"
          :key="item.id"
          class="item"
          :class="{ active: activeIndex === index }"
          @tap="activeIndex = index"
        >
          <text class="name">{{ item.name }}</text>
        </view>
      </scroll-view>
      <!-- 右侧：二级分类 -->
      <scroll-view class="secondary" scroll-y>
        <!-- 27.end 焦点图 -->
        <XtxSwiper class="banner" :list="bannerList" /><!-- 28.end 渲染: 分类页-轮播图 -->
        <!-- 内容区域 -->
        <view class="panel" v-for="item in subCategoryList" :key="item.id">
          <!-- 30.5 渲染[二级分类] -->
          <view class="title">
            <text class="name">{{ item.name }}</text>
            <navigator class="more" hover-class="none">全部</navigator>
          </view>
          <view class="section">
            <!-- 30.end 渲染[二级分类]商品数据 -->
            <navigator
              v-for="goods in item.goods"
              :key="goods"
              class="goods"
              hover-class="none"
              :url="`/pages/goods/goods?id=${goods.id}`"
            >
              <image class="image" :src="goods.picture"></image>
              <view class="name ellipsis">{{ goods.name }}</view>
              <view class="price">
                <text class="symbol">¥</text>
                <text class="number">{{ goods.price }}</text>
              </view>
            </navigator>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
  <PageSkeleton v-else /><!-- 31.6同步: 骨架屏 + 31.end -->
</template>

<style lang="scss">
/* 27.6 样式 */
@import './styles/category.scss';
</style>
